import React, { Component } from 'react';
import { Cascader, Tooltip, Empty } from 'antd';
import PropTypes from 'prop-types';
import cn from 'classnames';
import _ from 'lodash';
import './index.less';

class TreeCascader extends Component {
  constructor(props) {
    super(props);
    this.state = {
      options: [],
      currentWidth: 200
    };
    this.ref = React.createRef();
  }

  updateCurrentWidth = () => {
    this.setState({
      currentWidth: _.get(this.ref, 'current.clientWidth', 200)
    });
  };

  componentDidMount() {
    if (this.props.fetchBySelf) {
      this.loadData();
    }

    this.updateCurrentWidth();
    window.addEventListener('resize', this.updateCurrentWidth);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.updateCurrentWidth);
  }

  loadData = () => {
    if (this.props.loader) {
      this.props.loader().then(options => {
        this.setState({ options });
      });
    }
  };

  renderPop = label => {
    const { popShow = false } = this.props;
    if (popShow) {
      return (
        <Tooltip
          overlayStyle={{ wordBreak: 'break-all', wordWrap: 'no_wrap' }}
          title={label.join(' / ')}
          placement="topLeft"
        >
          {label.join(' / ')}
        </Tooltip>
      );
    }
    return label.join(' / ');
  };
  onPopupVisibleChange = visible => {
    if (visible && this.props.fetchBySelf) {
      this.loadData();
    }
    if (this.props.onPopupVisibleChange) {
      this.props.onPopupVisibleChange(visible);
    }
  };
  render() {
    let { onChange, value = [], trigger = 'hover', fetchBySelf, cascaderProps = {} } = this.props;
    let options = [];
    if (fetchBySelf) {
      options = _.get(this.state, 'options', []);
    } else {
      options = _.get(this.props, 'options', []);
    }
    const isEmpty = !options.length;
    if (isEmpty) {
      options = [
        {
          _id: '',
          name: (
            <Empty
              description={'暂无数据'}
              image={Empty.PRESENTED_IMAGE_SIMPLE}
              style={{ width: this.state.currentWidth }}
            />
          ),
          disabled: true
        }
      ];
    }
    return (
      <div className="tree-cascader-wrapper" ref={this.ref}>
        <Cascader
          fieldNames={{ label: 'name', value: '_id', children: 'children' }}
          {...cascaderProps}
          value={value[0] ? value : null}
          changeOnSelect
          options={options}
          onChange={onChange}
          displayRender={this.renderPop}
          expandTrigger={trigger}
          style={{ width: '100%' }}
          popupClassName={cn('tree-cascader-popup', { empty: isEmpty })}
          onPopupVisibleChange={this.onPopupVisibleChange}
        />
      </div>
    );
  }
}

TreeCascader.propTypes = {
  options: PropTypes.array,
  fetchBySelf: PropTypes.bool,
  onChange: PropTypes.func,
  value: PropTypes.array,
  popShow: PropTypes.bool,
  trigger: PropTypes.string,
  onPopupVisibleChange: PropTypes.func,
  loader: PropTypes.func,
  cascaderProps: PropTypes.object
};

export default TreeCascader;
